<template>
  <div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="card-title">{{ title }}</span>
        <el-button
          style="float: right"
          size="mini"
          type="primary"
          @click="() => handleSave()"
          >保存</el-button
        >
      </div>
      <div class="text item">
        <div style="padding-bottom: 10px">{{ item.code }}</div>
        <div class="custom-transfer">
          <el-transfer
            v-model="grants"
            :data="apiMetadatas"
            :titles="['Open API', '选中']"
            filterable
            :props="{
              key: 'id',
              label: 'path',
            }"
          >
            <span slot-scope="{ option }">
              <el-row :gutter="20">
                <el-col :span="4"
                  ><el-tag v-if="option.method == 'get'">{{
                    option.method
                  }}</el-tag
                  ><el-tag type="success" v-if="option.method == 'post'">{{
                    option.method
                  }}</el-tag
                  ><el-tag type="warning" v-if="option.method == 'put'">{{
                    option.method
                  }}</el-tag
                  ><el-tag type="danger" v-if="option.method == 'delete'">{{
                    option.method
                  }}</el-tag></el-col
                >
                <el-col :span="20"
                  ><el-tooltip :content="option.path"
                    ><span>{{ option.path }}</span></el-tooltip
                  ></el-col
                >
              </el-row>
            </span>
          </el-transfer>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getApiMetadatas } from "@/api/apimetadata.js";
import {
  getPermissionItemApiGrants,
  updatePermissionItemApiGrants,
} from "@/api/permission";
export default {
  components: {},
  data() {
    return {
      grants: [],
      apiMetadatas: [],
      title: "",
    };
  },
  methods: {
    getApiMetadataData(callback) {
      getApiMetadatas({ skipCount: 0, maxResultCount: 1000 }).then((res) => {
        res = res || { items: [] };
        this.apiMetadatas = res.items;
        if (this.apiMetadatas.length == 0) return;
        if (callback) callback();
      });
    },
    getData() {
      this.grants = [];
      if (!this.id) return;
      getPermissionItemApiGrants(this.id).then((res) => {
        res = res || [];

        res.forEach((item) => {
          this.grants.push(item.apiMetadataId);
        });
      });
    },
    handleSave() {
      let datas = [];

      this.grants.forEach((apiMetadataId) => {
        datas.push({ permissionItemId: this.id, apiMetadataId: apiMetadataId });
      });

      updatePermissionItemApiGrants(this.id, datas).then((res) => {
        if (!res) return;
        this.$notify({
          title: "成功",
          message: "保存成功",
          type: "success",
          position: "bottom-right",
        });
        this.$emit("refresh", res);
      });
    },
  },
  mounted() {
    this.title = this.id ? "编辑" : "新增";
    this.getApiMetadataData(() => {
      this.getData();
    });
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    item: {
      type: Object,
      default: () => {},
    },
  },
};
</script>
<style scoped>
.custom-transfer >>> .el-transfer-panel {
  width: 420px;
}
</style>
